<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>drag</title>
        <style type='text/css'>
            body {font-family: verdana}
			.handle {
				width: 300px;
				height: 25px;
				border: dashed 1px red;
				cursor : pointer;
			}
			.big {
				height: 100px;
			}
			#container {
				padding: 20px;
				border: dashed 2px green;
			}
			#representative {
				width: 100px;
				height: 60px;
				border: solid 1px blue;
				cursor: pointer;
			}
			#scrollarea ul li {height: 40px; border: solid 1px gray; font-size: 25px;list-style: none}
			#scrollarea ul {margin: 0px;padding: 0px;}
			#scrollarea {
				width: 200px; height: 100px; overflow: auto;
				border: solid 2px black;
			}
        </style>
	</head>
	<body>
<div  id='demo-html'>
<h2>Drag with bind</h2>
<div id="drag" class='handle'>Drag Me</div>

<h2>Delegated Drags</h2>
<div id="delegate">
	<div class='handle'>handle</div>
	<div class='handle'>handle</div>
</div>

<h2>Drag Ghost</h2>
<div id="ghost" class='handle'>Drag and I get cloned</div>

<h2>Drag Revert</h2>
<div id="revert" class='handle'>Drag and let me go</div>

<h2>Limit Drag</h2>
<div id='container'>
	<div class='handle'>drag me out of bounds</div>
</div>

<h2>Drag Representative</h2>
<div id='repdrag' class='handle'>Drag a Representative</div>
<div id='representative' style='display: none'>I represent You</div>

<h2>Drag Horizontal</h2>
<div id='horizontal' class='handle'>I only move horizontal</div>

<h2>Drag Scrolls</h2>
<div id='scroll-drag' class='handle'>I move scrollbars</div>
<div id='scrollarea'>
	<ul><li>1</li><li>2</li><li>3</li>
	    <li>4</li><li>5</li><li>6</li>
		<li>7</li><li>8</li><li>9</li></ul>
</div>
</div>
<h2>Allow Text Selection</h2>
<div id='form-drag' class='handle big'>
	<p>I should be able to drag on this</p>
	<input type='text' value='I can be clicked on'/>
</div>
		<script type='text/javascript' src='../../../steal/steal.js'>   
        </script>
		<script type='text/javascript'>
steal.plugins("jquery/event/drag",
	"jquery/event/drag/scroll",
	"jquery/event/drag/limit").then(function($){
	
		
}).start()
		</script>
	<script type='text/javascript' id='demo-source'>
//drag with bind
$("#drag").bind("draginit",function(){})

//delegated drags
$("#delegate").delegate(".handle","draginit",function(){})

//ghost
$("#ghost").bind("draginit",function(ev, drag){drag.ghost()})

//revert
$("#revert").bind("draginit",function(ev, drag){drag.revert()})

//limit
$("#container").delegate(".handle","draginit",function(ev, drag){drag.limit( $("#container") )})

//representative
$("#repdrag").bind("draginit",function(ev, drag){drag.representative($("#representative"),50,30)})

//horizontal
$("#horizontal").bind("draginit",function(ev, drag){drag.horizontal()})

//scrolls
$("#scroll-drag").bind("draginit",function(ev, drag){drag.scrolls( $("#scrollarea") )})

// allow form elements to be selected
$("#form-drag").bind("dragdown",function(ev, drag){
	if(ev.target.nodeName.toLowerCase() == 'input'){
		drag.cancel();
	}else{
		ev.preventDefault();
	}
})
</script>
	</body>
</html>